import { Nav } from "@douyinfe/semi-ui";
import { useRouter } from "next/router";
import {
  IconHome,
  IconArticle,
  IconUserGroup,
  IconHistogram,
} from "@douyinfe/semi-icons";
import { useState, useEffect } from "react";
export default function SideNav(props) {
  const [iscollapsed, setIsCollapsed] = useState(false);
  const router = useRouter();
  useEffect(() => {
    setIsCollapsed(window.matchMedia("(orientation: portrait)").matches);
  }, [setIsCollapsed]);
  return (
    <Nav
      style={{ height: "100%" }}
      defaultIsCollapsed={iscollapsed}
      defaultSelectedKeys={[props.page]}
      onClick={(data) => router.push(data.itemKey)}
      items={[
        {
          itemKey: "/",
          text: "首页",
          icon: <IconHome size="large" />,
        },
        {
          itemKey: "/exams",
          text: "考试列表",
          icon: <IconArticle size="large" />,
        },
        {
          itemKey: "/students",
          text: "学生列表",
          icon: <IconUserGroup size="large" />,
        },
        {
          itemKey: "/teachers",
          text: "教师列表",
          icon: <IconUserGroup size="large" />,
        },
        {
          itemKey: "/statistics",
          text: "统计数据",
          icon: <IconHistogram size="large" />,
        },
      ]}
      footer={{
        collapseButton: true,
      }}
    />
  );
}
